<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="height:100%;width:100%;background-color: aqua;">
        qwqw
        <div style="height:1000px;">

        </div>
    </div>
    <script>
        // 函数防抖，频繁操作中不处理，直到操作完成之后（再过 delay 的时间）才一次性处理
        function debounce(fn, delay) {
            delay = delay || 200;
            
            var timer = null;

            return function() {
                var arg = arguments;
                
                // 每次操作时，清除上次的定时器
                clearTimeout(timer);
                timer = null;
                console.log(this)
                console.log(arg)
                // 定义新的定时器，一段时间后进行操作
                timer = setTimeout(function() {
                    fn.apply(this, arg);
                }, delay);
            }
        };

        var count = 0;

        // 主体
        function scrollHandle(e) {
            console.log(e.type, ++count); // scroll
        }

        // 代理
        var proxyScrollHandle = (function() {
            return debounce(scrollHandle, 500);
        });

        window.onscroll = proxyScrollHandle();
    </script>
</body>
</html>